<!DOCTYPE html>
<html>

<head>
  <title>React路由管理方案：react-router-dom</title>
  <meta charset='utf-8'>
  <link href='https://cdn.maxiang.io/res-min/themes/marxico.css' rel='stylesheet'>
  <style>
    #preview-contents {
      margin-top: -20px;
      width: 800px;
    }

    #preview-contents img {
      width: 500px;
    }
  </style>
</head>

<body>
  <div id='preview-contents' class='note-content'>
    <h3 id="react路由管理方案react-router-dom">React路由管理方案：react-router-dom</h3>
    <blockquote>
      <p>当代前端开发，大部分都以SPA单页面应用开发为主</p>
      <ul>
        <li>
          <p>管理系统</p>
        </li>
        <li>
          <p>移动端WebApp「或App」</p>
        </li>
        <li>
          <p>其他情况</p>
        </li>
      </ul>

      <p>而前端路由机制，就是构建SPA单页面应用的利器 <br>
        <a href="https://reactrouter.com/en/main" target="_blank">https://reactrouter.com/en/main</a>
      </p>
    </blockquote>
    <p><img style="width: 700px;" longdesc="./1663159008298.png" alt="Alt text" title="" type="image/png"
        src=""
        class=""></p>

    <h4 id="路由设计模式">路由设计模式</h4>
    <p><strong>1. 哈希（hash）路由</strong> <br>
      原理：每一次路由跳转，都是改变页面的hash值；并且监听hashchange事件，渲染不同的内容！！</p>
    <pre class="prettyprint hljs-dark"><code class="language-xml hljs"><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-box"</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#/"</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#/product"</span>&gt;</span>产品中心<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"#/personal"</span>&gt;</span>个人中心<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"view-box"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">&lt;!-- IMPORT JS --&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-comment">// 路由容器</span></span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-keyword">const</span> viewBox = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.view-box'</span>);</span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-comment">// 路由表</span></span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-keyword">const</span> routes = [{</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-attr">path</span>: <span class="hljs-string">'/'</span>,</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-attr">component</span>: <span class="hljs-string">'首页内容'</span></span>
</div><div class="hljs-line"><span class="javascript">    }, {</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-attr">path</span>: <span class="hljs-string">'/product'</span>,</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-attr">component</span>: <span class="hljs-string">'产品中心内容'</span></span>
</div><div class="hljs-line"><span class="javascript">    }, {</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-attr">path</span>: <span class="hljs-string">'/personal'</span>,</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-attr">component</span>: <span class="hljs-string">'个人中心内容'</span></span>
</div><div class="hljs-line"><span class="javascript">    }];</span>
</div><div class="hljs-line"><span class="javascript"></span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-comment">// 页面一加载，我们设置默认的hash值</span></span>
</div><div class="hljs-line"><span class="javascript">    location.hash = <span class="hljs-string">'/'</span>;</span>
</div><div class="hljs-line"><span class="javascript"></span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-comment">// 路由匹配的方法</span></span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-keyword">const</span> routerMatch = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">routerMatch</span>(<span class="hljs-params"></span>) </span>{</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-keyword">let</span> hash = location.hash.substring(<span class="hljs-number">1</span>),</span>
</div><div class="hljs-line"><span class="javascript">            text = <span class="hljs-string">""</span>;</span>
</div><div class="hljs-line"><span class="javascript">        routes.forEach(<span class="hljs-function"><span class="hljs-params">route</span> =&gt;</span> {</span>
</div><div class="hljs-line"><span class="javascript">            <span class="hljs-keyword">if</span> (route.path === hash) {</span>
</div><div class="hljs-line"><span class="javascript">                text = route.component;</span>
</div><div class="hljs-line"><span class="javascript">            }</span>
</div><div class="hljs-line"><span class="javascript">        });</span>
</div><div class="hljs-line"><span class="javascript">        viewBox.innerHTML = text;</span>
</div><div class="hljs-line"><span class="javascript">    };</span>
</div><div class="hljs-line"><span class="javascript">    routerMatch();</span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'hashchange'</span>, routerMatch);</span>
</div><div class="hljs-line"><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</div></code></pre>

    <p><strong>2. 浏览器（history）路由</strong> <br>
      原理：利用H5的HistoryAPI完成路由的切换和组件的渲染！ <br>
      <a href="https://developer.mozilla.org/zh-CN/docs/Web/API/History_API"
        target="_blank">https://developer.mozilla.org/zh-CN/docs/Web/API/History_API</a>
    </p>
    <pre class="prettyprint hljs-dark"><code class="language-xml hljs"><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"nav-box"</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/"</span>&gt;</span>首页<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/product"</span>&gt;</span>产品中心<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"/personal"</span>&gt;</span>个人中心<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"view-box"</span>&gt;</span><span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">&lt;!-- IMPORT JS --&gt;</span>
</div><div class="hljs-line"><span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"></span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-keyword">const</span> viewBox = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.view-box'</span>),</span>
</div><div class="hljs-line"><span class="javascript">        navBox = <span class="hljs-built_in">document</span>.querySelector(<span class="hljs-string">'.nav-box'</span>);</span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-keyword">const</span> routes = [{</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-attr">path</span>: <span class="hljs-string">'/'</span>,</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-attr">component</span>: <span class="hljs-string">'首页内容'</span></span>
</div><div class="hljs-line"><span class="javascript">    }, {</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-attr">path</span>: <span class="hljs-string">'/product'</span>,</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-attr">component</span>: <span class="hljs-string">'产品中心内容'</span></span>
</div><div class="hljs-line"><span class="javascript">    }, {</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-attr">path</span>: <span class="hljs-string">'/personal'</span>,</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-attr">component</span>: <span class="hljs-string">'个人中心内容'</span></span>
</div><div class="hljs-line"><span class="javascript">    }];</span>
</div><div class="hljs-line"><span class="javascript"></span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-comment">// 路由匹配</span></span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-keyword">const</span> routerMatch = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">routerMatch</span>(<span class="hljs-params"></span>) </span>{</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-keyword">let</span> path = location.pathname,</span>
</div><div class="hljs-line"><span class="javascript">            text = <span class="hljs-string">""</span>;</span>
</div><div class="hljs-line"><span class="javascript">        routes.forEach(<span class="hljs-function"><span class="hljs-params">route</span> =&gt;</span> {</span>
</div><div class="hljs-line"><span class="javascript">            <span class="hljs-keyword">if</span> (route.path === path) {</span>
</div><div class="hljs-line"><span class="javascript">                text = route.component;</span>
</div><div class="hljs-line"><span class="javascript">            }</span>
</div><div class="hljs-line"><span class="javascript">        });</span>
</div><div class="hljs-line"><span class="javascript">        viewBox.innerHTML = text;</span>
</div><div class="hljs-line"><span class="javascript">    };</span>
</div><div class="hljs-line"><span class="javascript"></span>
</div><div class="hljs-line"><span class="javascript">    history.pushState({}, <span class="hljs-string">""</span>, <span class="hljs-string">"/"</span>);</span>
</div><div class="hljs-line"><span class="javascript">    routerMatch();</span>
</div><div class="hljs-line"><span class="javascript"></span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-comment">// 控制路由切换</span></span>
</div><div class="hljs-line"><span class="javascript">    navBox.addEventListener(<span class="hljs-string">'click'</span>, <span class="hljs-function"><span class="hljs-keyword">function</span> (<span class="hljs-params">ev</span>) </span>{</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-keyword">let</span> target = ev.target;</span>
</div><div class="hljs-line"><span class="javascript">        <span class="hljs-keyword">if</span> (target.tagName === <span class="hljs-string">'A'</span>) {</span>
</div><div class="hljs-line"><span class="javascript">            <span class="hljs-comment">// 阻止默认行为</span></span>
</div><div class="hljs-line"><span class="javascript">            ev.preventDefault();</span>
</div><div class="hljs-line"><span class="javascript">            <span class="hljs-comment">// 实现路由的跳转</span></span>
</div><div class="hljs-line"><span class="javascript">            history.pushState({}, <span class="hljs-string">""</span>, target.href);</span>
</div><div class="hljs-line"><span class="javascript">            routerMatch();</span>
</div><div class="hljs-line"><span class="javascript">        }</span>
</div><div class="hljs-line"><span class="javascript">    });</span>
</div><div class="hljs-line"><span class="javascript"></span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-comment">/* </span></span>
</div><div class="hljs-line"><span class="javascript">     popstate事件触发时机：</span>
</div><div class="hljs-line"><span class="javascript">     1）点击浏览器的前进、后退按钮</span>
</div><div class="hljs-line"><span class="javascript">     2）调用history.go/forward/back等方法</span>
</div><div class="hljs-line"><span class="javascript">     注意：history.pushState/replaceState不会触发此事件</span>
</div><div class="hljs-line"><span class="javascript">     */</span>
</div><div class="hljs-line"><span class="javascript">    <span class="hljs-built_in">window</span>.addEventListener(<span class="hljs-string">'popstate'</span>, routerMatch);</span>
</div><div class="hljs-line"><span class="javascript"></span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span>
</div></code></pre>

    <hr>

    <h4 id="react-router-dom-v5版本">react-router-dom V5版本</h4>
    <blockquote>
      <p>$ yarn add react-router-dom@5.3.4 <br>
        <a href="https://v5.reactrouter.com/web/guides/quick-start"
          target="_blank">https://v5.reactrouter.com/web/guides/quick-start</a>
      </p>
    </blockquote>

    <p><strong>基础运用</strong></p>
    <p>1、<code>&lt;Link&gt;</code>等组件，需要放在<code>Router(BrowserRouter/HashRouter)</code>的内部！</p>
    <p>2、每当页面加载或者路由切换的时候，都会去和每一个<code>&lt;Route&gt;</code>进行匹配</p>
    <ul>
      <li>
        <p>和其中一个匹配成功后，还会继续向下匹配，所以需要基于<code>&lt;Switch&gt;</code>处理</p>
      </li>
      <li>
        <p>默认是“非精准”匹配的，所以我们需要基于<code>exact</code>处理</p>
      </li>
    </ul>
    <pre class="prettyprint hljs-dark"><code class="hljs livescript"><div class="hljs-line"><span class="hljs-comment">/* App.jsx */</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { HashRouter, Route, Switch, Redirect, Link } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A <span class="hljs-keyword">from</span> <span class="hljs-string">'./views/A'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> B <span class="hljs-keyword">from</span> <span class="hljs-string">'./views/B'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> C <span class="hljs-keyword">from</span> <span class="hljs-string">'./views/C'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> App = <span class="hljs-keyword">function</span> App() {
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> &lt;HashRouter&gt;
</div><div class="hljs-line">        {<span class="hljs-comment">/* 导航区域 */</span>}
</div><div class="hljs-line">        &lt;nav className=<span class="hljs-string">"nav-box"</span>&gt;
</div><div class="hljs-line">            &lt;Link <span class="hljs-keyword">to</span>=<span class="hljs-string">"/"</span>&gt;A&lt;/Link&gt;
</div><div class="hljs-line">            &lt;Link <span class="hljs-keyword">to</span>=<span class="hljs-string">"/b"</span>&gt;B&lt;/Link&gt;
</div><div class="hljs-line">            &lt;Link <span class="hljs-keyword">to</span>=<span class="hljs-string">"/c"</span>&gt;C&lt;/Link&gt;
</div><div class="hljs-line">        &lt;/nav&gt;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">        {<span class="hljs-comment">/* 内容区域 */</span>}
</div><div class="hljs-line">        &lt;div className=<span class="hljs-string">"content"</span>&gt;
</div><div class="hljs-line">            &lt;Switch&gt;
</div><div class="hljs-line">                &lt;Route exact path=<span class="hljs-string">"/"</span> component={A} /&gt;
</div><div class="hljs-line">                &lt;Route path=<span class="hljs-string">"/b"</span> component={B} /&gt;
</div><div class="hljs-line">                &lt;Route path=<span class="hljs-string">"/c"</span> component={C} /&gt;
</div><div class="hljs-line">                {<span class="hljs-comment">/* &lt;Route component={404组件} /&gt; */</span>}
</div><div class="hljs-line">                &lt;Redirect <span class="hljs-keyword">to</span>=<span class="hljs-string">"/"</span> /&gt;
</div><div class="hljs-line">            &lt;/Switch&gt;
</div><div class="hljs-line">        &lt;/div&gt;
</div><div class="hljs-line">    &lt;/HashRouter&gt;;
</div><div class="hljs-line">};
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App;
</div></code></pre>
    <p>在路由匹配成功后，可以基于component指定需要渲染的组件，也可以基于render指定一个函数，基于函数的返回值，动态控制渲染的内容！！</p>
    <pre class="prettyprint hljs-dark"><code class="hljs coq"><div class="hljs-line">&lt;Route path=<span class="hljs-string">"/c"</span> render={() =&gt; {
</div><div class="hljs-line">    <span class="hljs-keyword">if</span> (<span class="hljs-number">1</span> === <span class="hljs-number">1</span>) {
</div><div class="hljs-line">        <span class="hljs-keyword">return</span> &lt;C /&gt;
</div><div class="hljs-line">    }
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> &lt;<span class="hljs-keyword">Redirect</span> to=<span class="hljs-string">"/"</span> /&gt;
</div><div class="hljs-line">}} /&gt;
</div></code></pre>

    <p><strong>二级路由</strong></p>
    <pre class="prettyprint hljs-dark"><code class="hljs dust"><div class="hljs-line"><span class="xml">/* App.jsx */</span>
</div><div class="hljs-line"><span class="xml">const App = function App() </span><span class="hljs-template-variable">{</span>
</div><div class="hljs-line"><span class="hljs-template-variable">  return &lt;HashRouter&gt;</span>
</div><div class="hljs-line"><span class="hljs-template-variable">      {/* 导航区域 */}</span><span class="xml"></span>
</div><div class="hljs-line"><span class="xml">      <span class="hljs-tag">&lt;<span class="hljs-name">nav</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"nav-box"</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/a"</span>&gt;</span>A<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">          ...</span>
</div><div class="hljs-line"><span class="xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">nav</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml"></span>
</div><div class="hljs-line"><span class="xml">      </span><span class="hljs-template-tag">{/* 内容区域 */}</span><span class="xml"></span>
</div><div class="hljs-line"><span class="xml">      <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"content"</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">          <span class="hljs-tag">&lt;<span class="hljs-name">Switch</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">              <span class="hljs-tag">&lt;<span class="hljs-name">Redirect</span> <span class="hljs-attr">exact</span> <span class="hljs-attr">from</span>=<span class="hljs-string">"/"</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/a"</span> /&gt;</span></span>
</div><div class="hljs-line"><span class="xml">              <span class="hljs-tag">&lt;<span class="hljs-name">Route</span> <span class="hljs-attr">path</span>=<span class="hljs-string">"/a"</span> <span class="hljs-attr">component</span>=</span></span><span class="hljs-template-variable">{A}</span><span class="xml"><span class="hljs-tag"> /&gt;</span></span>
</div><div class="hljs-line"><span class="xml">              ...</span>
</div><div class="hljs-line"><span class="xml">          <span class="hljs-tag">&lt;/<span class="hljs-name">Switch</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">      <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">  <span class="hljs-tag">&lt;/<span class="hljs-name">HashRouter</span>&gt;</span>;</span>
</div><div class="hljs-line"><span class="xml">}</span>
</div></code></pre>
    <pre class="prettyprint hljs-dark"><code class="hljs lasso"><div class="hljs-line"><span class="hljs-comment">/* A.jsx */</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> React from <span class="hljs-string">"react"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { <span class="hljs-keyword">Link</span>, Route, Redirect, Switch } from <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A1 from <span class="hljs-string">'./a/A1'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A2 from <span class="hljs-string">'./a/A2'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A3 from <span class="hljs-string">'./a/A3'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 处理样式</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> styled from <span class="hljs-string">"styled-components"</span>;
</div><div class="hljs-line">const DemoBox = styled.div<span class="hljs-string">`</span>
</div><div class="hljs-line"><span class="hljs-string">    display: flex;</span>
</div><div class="hljs-line"><span class="hljs-string">    .menu{</span>
</div><div class="hljs-line"><span class="hljs-string">        a{</span>
</div><div class="hljs-line"><span class="hljs-string">          display:block;</span>
</div><div class="hljs-line"><span class="hljs-string">        }</span>
</div><div class="hljs-line"><span class="hljs-string">    }</span>
</div><div class="hljs-line"><span class="hljs-string">`</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">const A = function A() {
</div><div class="hljs-line">    <span class="hljs-comment">// '/a/xxx' 中的 '/a' 不能省略！！</span>
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> &lt;DemoBox&gt;
</div><div class="hljs-line">        &lt;div className=<span class="hljs-string">"menu"</span>&gt;
</div><div class="hljs-line">            &lt;<span class="hljs-keyword">Link</span> <span class="hljs-keyword">to</span>=<span class="hljs-string">"/a/a1"</span>&gt;A1&lt;/<span class="hljs-keyword">Link</span>&gt;
</div><div class="hljs-line">            &lt;<span class="hljs-keyword">Link</span> <span class="hljs-keyword">to</span>=<span class="hljs-string">"/a/a2"</span>&gt;A2&lt;/<span class="hljs-keyword">Link</span>&gt;
</div><div class="hljs-line">            &lt;<span class="hljs-keyword">Link</span> <span class="hljs-keyword">to</span>=<span class="hljs-string">"/a/a3"</span>&gt;A3&lt;/<span class="hljs-keyword">Link</span>&gt;
</div><div class="hljs-line">        &lt;/div&gt;
</div><div class="hljs-line">        &lt;div className=<span class="hljs-string">"content"</span>&gt;
</div><div class="hljs-line">            &lt;Switch&gt;
</div><div class="hljs-line">                &lt;Redirect exact from=<span class="hljs-string">"/a"</span> <span class="hljs-keyword">to</span>=<span class="hljs-string">"/a/a1"</span> /&gt;
</div><div class="hljs-line">                &lt;Route path=<span class="hljs-string">"/a/a1"</span> component={A1} /&gt;
</div><div class="hljs-line">                &lt;Route path=<span class="hljs-string">"/a/a2"</span> component={A2} /&gt;
</div><div class="hljs-line">                &lt;Route path=<span class="hljs-string">"/a/a3"</span> component={A3} /&gt;
</div><div class="hljs-line">            &lt;/Switch&gt;
</div><div class="hljs-line">        &lt;/div&gt;
</div><div class="hljs-line">    &lt;/DemoBox&gt;;
</div><div class="hljs-line">};
</div><div class="hljs-line">export default A;
</div></code></pre>

    <p><strong>构建路由表</strong> <br>
      router/index.jsx</p>
    <pre class="prettyprint hljs-dark"><code class="hljs coffeescript"><div class="hljs-line"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { Switch, Route, Redirect } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">const RouterView = function RouterView(props) {
</div><div class="hljs-line">    let { routes } = props;
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> &lt;Switch&gt;
</div><div class="hljs-line">        {routes.map(<span class="hljs-function"><span class="hljs-params">(route, index)</span> =&gt;</span> {
</div><div class="hljs-line">            let { redirect, <span class="hljs-keyword">from</span>, to, exact, path, name, component: Component, meta } = route,
</div><div class="hljs-line">                props = {};
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (redirect) {
</div><div class="hljs-line">                props = { to };
</div><div class="hljs-line">                <span class="hljs-keyword">if</span> (<span class="hljs-keyword">from</span>) props.<span class="hljs-keyword">from</span> = <span class="hljs-keyword">from</span>;
</div><div class="hljs-line">                <span class="hljs-keyword">if</span> (exact) props.exact = <span class="hljs-literal">true</span>;
</div><div class="hljs-line">                <span class="hljs-keyword">return</span> &lt;Redirect key={index} {...props} /&gt;
</div><div class="hljs-line">            }
</div><div class="hljs-line">            props = { path };
</div><div class="hljs-line">            <span class="hljs-keyword">if</span> (exact) props.exact = <span class="hljs-literal">true</span>;
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> &lt;Route key={index} {...props} render={() =&gt; {
</div><div class="hljs-line">                <span class="hljs-regexp">//</span> 做一些特殊的处理，例如：登录态检验、导航守卫等
</div><div class="hljs-line">                <span class="hljs-keyword">return</span> &lt;Component /&gt;;
</div><div class="hljs-line">            }} /&gt;;
</div><div class="hljs-line">        })}
</div><div class="hljs-line">    &lt;/Switch&gt;;
</div><div class="hljs-line">};
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> RouterView;
</div></code></pre>
    <p>router/routes.js</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> A <span class="hljs-keyword">from</span> <span class="hljs-string">'../views/A'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> B <span class="hljs-keyword">from</span> <span class="hljs-string">'../views/B'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> C <span class="hljs-keyword">from</span> <span class="hljs-string">'../views/C'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/* </span>
</div><div class="hljs-line"><span class="hljs-comment">一级路由 </span>
</div><div class="hljs-line"><span class="hljs-comment">  重定向选项</span>
</div><div class="hljs-line"><span class="hljs-comment">    + redirect:true</span>
</div><div class="hljs-line"><span class="hljs-comment">    + from:从哪来</span>
</div><div class="hljs-line"><span class="hljs-comment">    + to:定向的地址</span>
</div><div class="hljs-line"><span class="hljs-comment">    + exact:精准匹配</span>
</div><div class="hljs-line"><span class="hljs-comment">  正常选项</span>
</div><div class="hljs-line"><span class="hljs-comment">    + path:匹配路径</span>
</div><div class="hljs-line"><span class="hljs-comment">    + name:路由名称</span>
</div><div class="hljs-line"><span class="hljs-comment">    + component:需要渲染的组件</span>
</div><div class="hljs-line"><span class="hljs-comment">    + meta:路由元信息</span>
</div><div class="hljs-line"><span class="hljs-comment">    + exact:精准匹配</span>
</div><div class="hljs-line"><span class="hljs-comment">*/</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> routes = [{
</div><div class="hljs-line">    <span class="hljs-attr">redirect</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">    <span class="hljs-attr">from</span>: <span class="hljs-string">'/'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">to</span>: <span class="hljs-string">'/a'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">exact</span>: <span class="hljs-literal">true</span>
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/a'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'a'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: A,
</div><div class="hljs-line">    <span class="hljs-attr">meta</span>: {}
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/b'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'b'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: B,
</div><div class="hljs-line">    <span class="hljs-attr">meta</span>: {}
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/c'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'c'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: C,
</div><div class="hljs-line">    <span class="hljs-attr">meta</span>: {}
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">redirect</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">    <span class="hljs-attr">to</span>: <span class="hljs-string">'/a'</span>
</div><div class="hljs-line">}];
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> routes;
</div></code></pre>
    <p>router/aRoutes.js</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">/* A组件的二级路由 */</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A1 <span class="hljs-keyword">from</span> <span class="hljs-string">'../views/a/A1'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A2 <span class="hljs-keyword">from</span> <span class="hljs-string">'../views/a/A2'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A3 <span class="hljs-keyword">from</span> <span class="hljs-string">'../views/a/A3'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> aRoutes = [{
</div><div class="hljs-line">    <span class="hljs-attr">redirect</span>: <span class="hljs-literal">true</span>,
</div><div class="hljs-line">    <span class="hljs-attr">from</span>: <span class="hljs-string">'/a'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">to</span>: <span class="hljs-string">'/a/a1'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">exact</span>: <span class="hljs-literal">true</span>
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/a/a1'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'a-a1'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: A1,
</div><div class="hljs-line">    <span class="hljs-attr">meta</span>: {}
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/a/a2'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'a-a2'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: A2,
</div><div class="hljs-line">    <span class="hljs-attr">meta</span>: {}
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/a/a3'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'a-a3'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: A3,
</div><div class="hljs-line">    <span class="hljs-attr">meta</span>: {}
</div><div class="hljs-line">}];
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> aRoutes;
</div></code></pre>
    <p>App.jsx</p>
    <pre class="prettyprint hljs-dark"><code class="language-xml hljs"><div class="hljs-line">import { HashRouter, Link } from 'react-router-dom';
</div><div class="hljs-line">import RouterView from "./router";
</div><div class="hljs-line">import routes from "./router/routes";
</div><div class="hljs-line">const App = function App() {
</div><div class="hljs-line">    return <span class="hljs-tag">&lt;<span class="hljs-name">HashRouter</span>&gt;</span>
</div><div class="hljs-line">        ...
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"content"</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">RouterView</span> <span class="hljs-attr">routes</span>=<span class="hljs-string">{routes}</span> /&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;/<span class="hljs-name">HashRouter</span>&gt;</span>;
</div><div class="hljs-line">};
</div><div class="hljs-line">export default App;
</div></code></pre>
    <p>views/A.jsx</p>
    <pre class="prettyprint hljs-dark"><code class="language-xml hljs"><div class="hljs-line">import { Link } from 'react-router-dom';
</div><div class="hljs-line">import RouterView from "../router";
</div><div class="hljs-line">import aRoutes from "../router/aRoutes";
</div><div class="hljs-line">...
</div><div class="hljs-line">const A = function A() {
</div><div class="hljs-line">    return <span class="hljs-tag">&lt;<span class="hljs-name">DemoBox</span>&gt;</span>
</div><div class="hljs-line">        ...
</div><div class="hljs-line">        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"content"</span>&gt;</span>
</div><div class="hljs-line">            <span class="hljs-tag">&lt;<span class="hljs-name">RouterView</span> <span class="hljs-attr">routes</span>=<span class="hljs-string">{aRoutes}</span> /&gt;</span>
</div><div class="hljs-line">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
</div><div class="hljs-line">    <span class="hljs-tag">&lt;/<span class="hljs-name">DemoBox</span>&gt;</span>;
</div><div class="hljs-line">};
</div><div class="hljs-line">export default A;
</div></code></pre>

    <p><strong>路由懒加载</strong> <br>
      RouterView.jsx</p>
    <pre class="prettyprint hljs-dark"><code class="hljs php"><div class="hljs-line"><span class="hljs-keyword">const</span> RouterView = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">RouterView</span><span class="hljs-params">(props)</span> </span>{
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> &lt;<span class="hljs-keyword">Switch</span>&gt;
</div><div class="hljs-line">        {routes.map((route, index) =&gt; {
</div><div class="hljs-line">            ...
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> &lt;Route key={index} {...props} render={() =&gt; {
</div><div class="hljs-line">                <span class="hljs-keyword">return</span> &lt;Suspense fallback={&lt;&gt;加载中...&lt;/&gt;}&gt;
</div><div class="hljs-line">                    &lt;Component /&gt;
</div><div class="hljs-line">                &lt;/Suspense&gt;;
</div><div class="hljs-line">            }} /&gt;;
</div><div class="hljs-line">        })}
</div><div class="hljs-line">    &lt;/<span class="hljs-keyword">Switch</span>&gt;;
</div><div class="hljs-line">};
</div><div class="hljs-line">export <span class="hljs-keyword">default</span> RouterView;
</div></code></pre>
    <p>路由表中</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> { lazy } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A <span class="hljs-keyword">from</span> <span class="hljs-string">'../views/A'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> routes = [
</div><div class="hljs-line">...
</div><div class="hljs-line">{
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    component: A
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    component: lazy(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'../views/B'</span>))
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    ...
</div><div class="hljs-line">    component: lazy(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'../views/C'</span>))
</div><div class="hljs-line">}
</div><div class="hljs-line">...
</div><div class="hljs-line">];
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> routes;
</div></code></pre>

    <p><strong>受控组件和withRouter</strong></p>
    <p>受控组件：基于Route路由渲染的组件</p>
    <ul>
      <li>
        <p>history -&gt; useHistory</p>
      </li>
      <li>
        <p>location -&gt; useLocation</p>
      </li>
      <li>
        <p>match -&gt; useRouteMatch</p>
      </li>
    </ul>
    <p>withRouter高阶函数的作用：让非受控组件具备受控组件的特征</p>
    <pre class="prettyprint hljs-dark"><code class="hljs zephir"><div class="hljs-line"><span class="hljs-comment">/* RouterView */</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> RouterView = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">RouterView</span><span class="hljs-params">(props)</span> </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> { routes } = props;
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> &lt;<span class="hljs-keyword">Switch</span>&gt;
</div><div class="hljs-line">        {routes.map((route, index) =&gt; {
</div><div class="hljs-line">            ...
</div><div class="hljs-line">            <span class="hljs-keyword">return</span> &lt;Route ... render={(props) =&gt; {
</div><div class="hljs-line">                <span class="hljs-keyword">return</span> &lt;Suspense ...&gt;
</div><div class="hljs-line">                    &lt;Component {...props} /&gt;
</div><div class="hljs-line">                &lt;/Suspense&gt;;
</div><div class="hljs-line">            }} /&gt;;
</div><div class="hljs-line">        })}
</div><div class="hljs-line">    &lt;/<span class="hljs-keyword">Switch</span>&gt;;
</div><div class="hljs-line">};
</div><div class="hljs-line">export <span class="hljs-keyword">default</span> RouterView;
</div></code></pre>
    <p><img longdesc="./1671387961074.png" alt="Alt text" title="" type="image/png"
        src=""
        class=""></p>
    <p>components/HomeHead.jsx</p>
    <pre class="prettyprint hljs-dark"><code class="hljs javascript"><div class="hljs-line"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { Link, withRouter } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 样式</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> styled <span class="hljs-keyword">from</span> <span class="hljs-string">"styled-components"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">const</span> HomeHeadBox = styled.nav<span class="hljs-string">`</span>
</div><div class="hljs-line"><span class="hljs-string">    a{</span>
</div><div class="hljs-line"><span class="hljs-string">        margin-right: 10px;</span>
</div><div class="hljs-line"><span class="hljs-string">    }</span>
</div><div class="hljs-line"><span class="hljs-string">`</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> HomeHead = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">HomeHead</span>(<span class="hljs-params">props</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-built_in">console</span>.log(props);
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">HomeHeadBox</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/a"</span>&gt;</span>A<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/b"</span>&gt;</span>B<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">Link</span> <span class="hljs-attr">to</span>=<span class="hljs-string">"/c"</span>&gt;</span>C<span class="hljs-tag">&lt;/<span class="hljs-name">Link</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">HomeHeadBox</span>&gt;</span></span>;
</div><div class="hljs-line">};
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> withRouter(HomeHead);
</div></code></pre>

    <p><strong>路由跳转方案</strong> <br>
      方案一：Link跳转</p>
    <pre class="prettyprint hljs-dark"><code class="hljs lasso"><div class="hljs-line">&lt;<span class="hljs-keyword">Link</span> <span class="hljs-keyword">to</span>=<span class="hljs-string">"/xxx"</span>&gt;导航&lt;/<span class="hljs-keyword">Link</span>&gt;
</div><div class="hljs-line">&lt;<span class="hljs-keyword">Link</span> <span class="hljs-keyword">to</span>={{
</div><div class="hljs-line">    pathname:<span class="hljs-string">'/xxx'</span>,
</div><div class="hljs-line">    search:<span class="hljs-string">''</span>,
</div><div class="hljs-line">    state:{}
</div><div class="hljs-line">}}&gt;导航&lt;/<span class="hljs-keyword">Link</span>&gt;
</div><div class="hljs-line">&lt;<span class="hljs-keyword">Link</span> <span class="hljs-keyword">to</span>=<span class="hljs-string">"/xxx"</span> replace&gt;导航&lt;/<span class="hljs-keyword">Link</span>&gt;
</div></code></pre>
    <p>方案二：编程式导航</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line">history.push(<span class="hljs-string">'/c'</span>);
</div><div class="hljs-line">history.push({
</div><div class="hljs-line">    <span class="hljs-attr">pathname</span>: <span class="hljs-string">'/c'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">search</span>: <span class="hljs-string">''</span>,
</div><div class="hljs-line">    <span class="hljs-attr">state</span>: {}
</div><div class="hljs-line">});
</div><div class="hljs-line">history.replace(<span class="hljs-string">'/c'</span>);
</div></code></pre>

    <p><strong>路由传参方案</strong> <br>
      方案一：问号传参 <br>
      特点：最常用的方案之一；传递信息暴露到URL地址中，不安全而且有点丑，也有长度限制！！</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">// 传递</span>
</div><div class="hljs-line">history.push({
</div><div class="hljs-line">    <span class="hljs-attr">pathname</span>: <span class="hljs-string">'/c'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">search</span>: <span class="hljs-string">'lx=0&amp;name=zhufeng'</span>
</div><div class="hljs-line">});
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 接收</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { useLocation } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">let</span> { search } = useLocation();
</div></code></pre>
    <p>方案二：路径参数 <br>
      特点：目前主流方案之一；</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">// 路由表</span>
</div><div class="hljs-line">{
</div><div class="hljs-line">    <span class="hljs-comment">// :xxx 动态匹配规则</span>
</div><div class="hljs-line">    <span class="hljs-comment">// ? 可有可无</span>
</div><div class="hljs-line">    path: <span class="hljs-string">'/c/:lx?/:name?'</span>,
</div><div class="hljs-line">    ....
</div><div class="hljs-line">}
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 传递</span>
</div><div class="hljs-line">history.push(<span class="hljs-string">`/c/0/zhufeng`</span>);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">//接收</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { useRouteMatch } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">let</span> { params } = useRouteMatch();
</div></code></pre>
    <p>方案三：隐式传参 <br>
      特点：传递信息是隐式传递，不暴露在外面；页面刷新，传递的信息就消失了！！</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">// 传递</span>
</div><div class="hljs-line">history.push({
</div><div class="hljs-line">    <span class="hljs-attr">pathname</span>: <span class="hljs-string">'/c'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">state</span>: {
</div><div class="hljs-line">        <span class="hljs-attr">lx</span>: <span class="hljs-number">0</span>,
</div><div class="hljs-line">        <span class="hljs-attr">name</span>: <span class="hljs-string">'zhufeng'</span>
</div><div class="hljs-line">    }
</div><div class="hljs-line">})
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 接收</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { useLocation } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">let</span> { state } = useLocation();
</div></code></pre>

    <p><strong>Link和NavLink</strong> <br>
      NavLink和Link都可以实现路由跳转，只不过NavLink有自动匹配，并且设置选中样式「active」的特点！！</p>
    <ul>
      <li>
        <p>每一次路由切换完毕后「或者页面加载完」，都会拿当前路由地址，和NavLink中的to「或者to中的pathname进行比较」,给匹配的这一项A，设置active样式类！！</p>
      </li>
      <li>
        <p>NavLink可与设置 exact 精准匹配属性</p>
      </li>
      <li>
        <p>可以基于 activeClassName 属性设置选中的样式类名</p>
      </li>
    </ul>
    <pre class="prettyprint hljs-dark"><code class="hljs dts"><div class="hljs-line"><span class="hljs-comment">// 结构</span>
</div><div class="hljs-line"><span class="hljs-params">&lt;NavLink to="/a"&gt;</span>A<span class="hljs-params">&lt;/NavLink&gt;</span>
</div><div class="hljs-line"><span class="hljs-params">&lt;NavLink to="/b"&gt;</span>B<span class="hljs-params">&lt;/NavLink&gt;</span>
</div><div class="hljs-line"><span class="hljs-params">&lt;NavLink to="/c"&gt;</span>C<span class="hljs-params">&lt;/NavLink&gt;</span>
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 样式</span>
</div><div class="hljs-line">const NavBox = styled.nav`
</div><div class="hljs-line">   a{
</div><div class="hljs-line">    margin-right: <span class="hljs-number">10</span>px;
</div><div class="hljs-line"><span class="hljs-symbol">    color:</span> <span class="hljs-meta">#000;</span>
</div><div class="hljs-line">    &amp;.active{
</div><div class="hljs-line"><span class="hljs-symbol">        color:</span>red;
</div><div class="hljs-line">    }
</div><div class="hljs-line">   }
</div><div class="hljs-line">`;
</div></code></pre>

    <hr>

    <h4 id="react-router-dom-v6版本">react-router-dom V6版本</h4>
    <blockquote>
      <p>$ yarn add react-router-dom <br>
        <a href="https://reactrouter.com/en/main" target="_blank">https://reactrouter.com/en/main</a>
      </p>
    </blockquote>

    <p><strong>基础应用 </strong> <br>
      App.jsx</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { HashRouter, Routes, Route, Navigate } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> HomeHead <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/HomeHead'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/* 导入需要的组件 */</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A <span class="hljs-keyword">from</span> <span class="hljs-string">'./views/A'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> B <span class="hljs-keyword">from</span> <span class="hljs-string">'./views/B'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> C <span class="hljs-keyword">from</span> <span class="hljs-string">'./views/C'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A1 <span class="hljs-keyword">from</span> <span class="hljs-string">'./views/a/A1.jsx'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A2 <span class="hljs-keyword">from</span> <span class="hljs-string">'./views/a/A2.jsx'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A3 <span class="hljs-keyword">from</span> <span class="hljs-string">'./views/a/A3.jsx'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> &lt;HashRouter&gt;
</div><div class="hljs-line">        &lt;HomeHead /&gt;
</div><div class="hljs-line">        &lt;div className="content"&gt;
</div><div class="hljs-line">            &lt;Routes&gt;
</div><div class="hljs-line">                {/* 一级路由 「特殊属性 index」*/}
</div><div class="hljs-line">                &lt;Route path="/" element={&lt;Navigate to="/a" /&gt;} /&gt;
</div><div class="hljs-line">                &lt;Route path="/a" element={&lt;A /&gt;} &gt;
</div><div class="hljs-line">                    {/* 二级路由 */}
</div><div class="hljs-line">                    &lt;Route path="/a" element={&lt;Navigate to="/a/a1" /&gt;} /&gt;
</div><div class="hljs-line">                    &lt;Route path="/a/a1" element={&lt;A1 /&gt;} /&gt;
</div><div class="hljs-line">                    &lt;Route path="/a/a2" element={&lt;A2 /&gt;} /&gt;
</div><div class="hljs-line">                    &lt;Route path="/a/a3" element={&lt;A3 /&gt;} /&gt;
</div><div class="hljs-line">                &lt;/Route&gt;
</div><div class="hljs-line">                &lt;Route path="/b" element={&lt;B /&gt;} /&gt;
</div><div class="hljs-line">                &lt;Route path="/c" element={&lt;C /&gt;} /&gt;
</div><div class="hljs-line">                &lt;Route path="*" element={&lt;Navigate to="/a" /&gt;} /&gt;
</div><div class="hljs-line">            &lt;/Routes&gt;
</div><div class="hljs-line">        &lt;/div&gt;
</div><div class="hljs-line">    &lt;/HashRouter&gt;;
</div><div class="hljs-line">};
</div><div class="hljs-line">export default App;
</div></code></pre>
    <p>A.jsx</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> { Link, Outlet } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line">...
</div><div class="hljs-line">const A = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">A</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">DemoBox</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        ...</span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"view"</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">Outlet</span> /&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">DemoBox</span>&gt;</span></span>;
</div><div class="hljs-line">};
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> A;
</div></code></pre>

    <p><strong>跳转及传参</strong></p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-comment">// C组件的路由地址</span>
</div><div class="hljs-line">&lt;Route path=<span class="hljs-string">"/c/:id?/:name?"</span> element={&lt;C /&gt;} /&gt;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/* 跳转及传参 */</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { useNavigate } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">const</span> B = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">B</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">const</span> navigate = useNavigate();
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"box"</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        B组件的内容</span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">button</span> <span class="hljs-attr">onClick</span>=<span class="hljs-string">{()</span> =&gt;</span> {</span>
</div><div class="hljs-line"><span class="xml">            navigate('/c');</span>
</div><div class="hljs-line"><span class="xml">            navigate('/c', { replace: true });</span>
</div><div class="hljs-line"><span class="xml">            navigate(-1);</span>
</div><div class="hljs-line"><span class="xml">            navigate({</span>
</div><div class="hljs-line"><span class="xml">                pathname: '/c/100/zxt',</span>
</div><div class="hljs-line"><span class="xml">                search: 'id=10&amp;name=zhufeng'</span>
</div><div class="hljs-line"><span class="xml">            });</span>
</div><div class="hljs-line"><span class="xml">            navigate('/c', { state: { x: 10, y: 20 } });</span>
</div><div class="hljs-line"><span class="xml">        }}&gt;按钮<span class="hljs-tag">&lt;/<span class="hljs-name">button</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
</div><div class="hljs-line">};
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> B;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">/* 接收信息 */</span>
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { useParams, useSearchParams, useLocation, useMatch } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">const</span> C = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">C</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">    <span class="hljs-comment">//获取路径参数信息</span>
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> params = useParams();
</div><div class="hljs-line">    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'useParams:'</span>, params);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">//获取问号传参信息</span>
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> [search] = useSearchParams();
</div><div class="hljs-line">    search = search.toString();
</div><div class="hljs-line">    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'useSearchParams:'</span>, search);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">//获取location信息「pathname/serach/state...」</span>
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> location = useLocation();
</div><div class="hljs-line">    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'useLocation:'</span>, location);
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-comment">//获取match信息</span>
</div><div class="hljs-line">    <span class="hljs-built_in">console</span>.log(<span class="hljs-string">'useMatch:'</span>, useMatch(location.pathname));
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"box"</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        C组件的内容</span>
</div><div class="hljs-line"><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>;
</div><div class="hljs-line">};
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> C;
</div></code></pre>

    <p><strong>路由表及懒加载</strong> <br>
      router/index.js</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> React, { Suspense } <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { Route, Routes, useNavigate, useParams, useSearchParams, useLocation, useMatch } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> routes <span class="hljs-keyword">from</span> <span class="hljs-string">"./routes"</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-comment">// 渲染内容的特殊处理</span>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> Element = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">Element</span>(<span class="hljs-params">props</span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">let</span> { <span class="hljs-attr">component</span>: Component, path } = props,
</div><div class="hljs-line">        options = {
</div><div class="hljs-line">            <span class="hljs-attr">navigate</span>: useNavigate(),
</div><div class="hljs-line">            <span class="hljs-attr">params</span>: useParams(),
</div><div class="hljs-line">            <span class="hljs-attr">query</span>: useSearchParams()[<span class="hljs-number">0</span>],
</div><div class="hljs-line">            <span class="hljs-attr">location</span>: useLocation(),
</div><div class="hljs-line">            <span class="hljs-attr">match</span>: useMatch(path)
</div><div class="hljs-line">        };
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> &lt;Component {...options} /&gt;;
</div><div class="hljs-line">};
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">// 递归创建路由规则
</div><div class="hljs-line">const createRoute = function createRoute(routes) {
</div><div class="hljs-line">    return &lt;&gt;
</div><div class="hljs-line">        {routes.map((item, index) =&gt; {
</div><div class="hljs-line">            return &lt;Route key={index} path={item.path} element={&lt;Element {...item} /&gt;}&gt;
</div><div class="hljs-line">                {item.children ? createRoute(item.children) : null}
</div><div class="hljs-line">            &lt;/Route&gt;;
</div><div class="hljs-line">        })}
</div><div class="hljs-line">    &lt;/&gt;;
</div><div class="hljs-line">};
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line">// 路由表管控
</div><div class="hljs-line">const RouterView = function RouterView() {
</div><div class="hljs-line">    return &lt;Suspense fallback={&lt;&gt;正在加载中...&lt;/&gt;}&gt;
</div><div class="hljs-line">        &lt;Routes&gt;
</div><div class="hljs-line">            {createRoute(routes)}
</div><div class="hljs-line">        &lt;/Routes&gt;
</div><div class="hljs-line">    &lt;/Suspense&gt;;
</div><div class="hljs-line">};
</div><div class="hljs-line">export default RouterView;
</div></code></pre>
    <p>router/routes.js</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> { lazy } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { Navigate } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> A <span class="hljs-keyword">from</span> <span class="hljs-string">'../views/A'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> aRoutes <span class="hljs-keyword">from</span> <span class="hljs-string">'./aRoutes'</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> routes = [{
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> &lt;Navigate to=<span class="hljs-string">"/a"</span> /&gt;
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/a'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'a'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: A,
</div><div class="hljs-line">    <span class="hljs-attr">meta</span>: {},
</div><div class="hljs-line">    <span class="hljs-attr">children</span>: aRoutes
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/b'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'b'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: lazy(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'../views/B'</span>)),
</div><div class="hljs-line">    <span class="hljs-attr">meta</span>: {}
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/c'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'c'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: lazy(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'../views/C'</span>)),
</div><div class="hljs-line">    <span class="hljs-attr">meta</span>: {}
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'*'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> &lt;Navigate to=<span class="hljs-string">"/a"</span> /&gt;
</div><div class="hljs-line">}];
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> routes;
</div></code></pre>
    <p>router/aRoutes.js</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> { lazy } <span class="hljs-keyword">from</span> <span class="hljs-string">'react'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { Navigate } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">const</span> aRoutes = [{
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/a'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: <span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> &lt;Navigate to=<span class="hljs-string">"/a/a1"</span> /&gt;
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/a/a1'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'a-a1'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: lazy(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'../views/a/A1'</span>)),
</div><div class="hljs-line">    <span class="hljs-attr">meta</span>: {}
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/a/a2'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'a-a2'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: lazy(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'../views/a/A2'</span>)),
</div><div class="hljs-line">    <span class="hljs-attr">meta</span>: {}
</div><div class="hljs-line">}, {
</div><div class="hljs-line">    <span class="hljs-attr">path</span>: <span class="hljs-string">'/a/a3'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">name</span>: <span class="hljs-string">'a-a3'</span>,
</div><div class="hljs-line">    <span class="hljs-attr">component</span>: lazy(<span class="hljs-function"><span class="hljs-params">()</span> =&gt;</span> <span class="hljs-keyword">import</span>(<span class="hljs-string">'../views/a/A3'</span>)),
</div><div class="hljs-line">    <span class="hljs-attr">meta</span>: {}
</div><div class="hljs-line">}];
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> aRoutes;
</div></code></pre>
    <p>App.jsx</p>
    <pre class="prettyprint hljs-dark"><code class="language-javascript hljs"><div class="hljs-line"><span class="hljs-keyword">import</span> React <span class="hljs-keyword">from</span> <span class="hljs-string">"react"</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> { HashRouter } <span class="hljs-keyword">from</span> <span class="hljs-string">'react-router-dom'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> HomeHead <span class="hljs-keyword">from</span> <span class="hljs-string">'./components/HomeHead'</span>;
</div><div class="hljs-line"><span class="hljs-keyword">import</span> RouterView <span class="hljs-keyword">from</span> <span class="hljs-string">"./router"</span>;
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">const</span> App = <span class="hljs-function"><span class="hljs-keyword">function</span> <span class="hljs-title">App</span>(<span class="hljs-params"></span>) </span>{
</div><div class="hljs-line">    <span class="hljs-keyword">return</span> <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">HashRouter</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">HomeHead</span> /&gt;</span></span>
</div><div class="hljs-line"><span class="xml"></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"content"</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">            <span class="hljs-tag">&lt;<span class="hljs-name">RouterView</span> /&gt;</span></span>
</div><div class="hljs-line"><span class="xml">        <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span></span>
</div><div class="hljs-line"><span class="xml">    <span class="hljs-tag">&lt;/<span class="hljs-name">HashRouter</span>&gt;</span></span>;
</div><div class="hljs-line">};
</div><div class="hljs-line"><wbr>
</div><div class="hljs-line"><span class="hljs-keyword">export</span> <span class="hljs-keyword">default</span> App;
</div></code></pre>
  </div>
</body>

</html>